<template>
  <div class="container">
    <div class="form-box">
      <div class="tran" >
     
        <!-- 解锁 -->
        <div class="login-box">
          <h1>解锁</h1>
          <el-form
            :model="loginForm"
            :rules="loginRules"
            ref="loginForm"
          >
            <el-form-item prop="password">
              <el-input
                v-model="loginForm.password"
                type="password"
                placeholder="解锁密码"
                @keyup.enter.native="handleLogin"
              ></el-input>
            </el-form-item>

          </el-form>
          <el-button
            style="width:100%;"
            
            >解锁</el-button>
          <a href="#" class="wjmm" @click="ForgotPassword">忘记密码？</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions,mapGetters } from "vuex";
import { removeToken, removeUserInfoo } from '@/utils/auth'
export default {
  name: "LockScreen",
  data() {
    return {
      loginForm: {
        password: ''
      },
      loginRules: {
        password: [
          { required: true, trigger: "blur", message: "请输入密码解锁" },
          {
            min: 6,
            max: 16,
            message: "密码的长度在6-16位之间 ",
            trigger: "blur",
          },
        ],
      },
      loading: false,
    };
  },
  computed: {
    ...mapGetters([
      'nickname'
    ])
  },
  methods: {
    ...mapActions(["user/login"]),
    // 登录
    handleLogin() {
      console.log(this.nickname,this.loginForm.password);
      this.$refs.loginForm.validate(async (isOK) => {
        if (isOK) {
          this.loading = true
          try {
            await this["user/login"]({user_name:this.nickname,password:this.loginForm.password});
             this.$message.success('解锁成功')
                window.sessionStorage.removeItem("Secret")
              this.$router.go(-1)
          } catch (error) {
          } finally {
            this.loading = false
          }
        } else {
        }
      });
    },
    // 忘记密码
    ForgotPassword(){
      console.log(111);
      window.sessionStorage.removeItem("Secret")
      removeToken()
      removeUserInfoo()
       this.$router.push("/login")
      // this.$router.go(0)
    }
  },
};
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 800px;
  background-size: 300%;
  background-image: linear-gradient(
    to bottom right,
    #4262bb,
    #9c8bca,
    #3698d0,
    #6989d8,
    #d550a0
  );
  animation:bgAnimation 10s linear infinite;
  @keyframes bgAnimation {
    0%{
      background-position: 0% 50%;
    }
    50%{
      background-position: 100% 50%;
    }
    100%{
      background-position: 0% 50%;
    }
  }
  .form-box {
    padding: 0px 20px;
    height: 300px;
    box-sizing: border-box;
    width: 500px;
    background: rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    .login-box {
        .el-button {
          background-color: #65c2dd;
          border: none;
          margin-bottom: 10px;
        }
        h1 {
          text-align: center;
          font-size: 40px;
          color: #6236b3;
          margin-bottom: 30px;
          letter-spacing: 8px;
        }
        ::v-deep.el-input__inner {
          border: 0;
          background: #a92be436;
        }
        .wjmm {
          padding-top: 10px;
        }
        a {
          text-decoration: none;
          color: #65c2dd;
          font-size: 14px;
        }
        p {
          margin: 15px auto;
          font-size: 14px;
          text-align: center;
          color: rgb(155, 148, 148);
        }
    }
  }
 
 
}
</style>
